<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!doctype html>

<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
	<title>Smart Traffic</title>
	<link rel="shortcut icon" href="favicon.ico">
	<link rel="stylesheet" href="css/plugins/leaflet.css" />
	<link rel="stylesheet" href="css/plugins/L.Control.Locate.css" />
	
	<link rel="stylesheet" href="css/plugins/jquery-ui.css">
	
	
	<link rel="stylesheet" href="css/main.css">
	<!-- Load photo -->
	<link rel="stylesheet" href="js/lib/cluster/MarkerCluster.css" />	
	<link rel="stylesheet" href="css/Leaflet.Photo.css" /> 
	<!--[if lt IE 9]>
	<link rel="stylesheet" href="css/plugins/leaflet.ie.css" />
	<link rel="stylesheet" href="css/plugins/L.Control.Locate.ie.css"/>
	<![endif]-->
	<script type="text/javascript" src="js/lib/jquery-1.10.2.js"></script>
	<script type="text/javascript">
	
	</script>
	



		
		<!-- FontAwesome - http://fortawesome.github.io/Font-Awesome/ -->
        <link rel="stylesheet" href="css/font-awesome.min.css" />

		<!-- jQueryMobileCSS - original without styling -->
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />

		<!-- nativeDroid core CSS -->
        <link rel="stylesheet" href="css/jquerymobile.nativedroid.css" />

		<!-- nativeDroid: Light/Dark -->
        <link rel="stylesheet" href="css/jquerymobile.nativedroid.dark.css"  id='jQMnDTheme' />

		<!-- nativeDroid: Color Schemes -->
        <link rel="stylesheet" href="css/jquerymobile.nativedroid.color.green.css" id='jQMnDColor' />

		<!-- jQuery / jQueryMobile Scripts -->
		<!--
		<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	-->
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>

        <style type="text/css">
            .a-left{
                display: inline-block;
                min-width: 200px;"
            }
			
        </style>

</head>
<body>
    
	
	<div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme='b'>
        <a href="#panel-login" data-ajax="false">
			<i class='fa fa-user'></i>
		</a>
         <h1>Smart Traffic</h1>
    </div>

   
	



<section id="wrapper-none-mobile">
<div class="Map-Container">
<div id="MainMap"></div>
			<script src="js/lib/leaflet-src.js"></script>
			
			<script src="js/map.js"></script>	
			<!-- Load Photo 
			<script src="js/reqwest.min.js"></script>-->
			<script src="js/lib/cluster/leaflet.markercluster.js"></script>
			<script src="js/Leaflet.Photo.js"></script>
		</div>
	</section>
	<!-- End web main interface -->
	

    <!-- panel search -->
	
	
    <div data-role="panel" data-display="push" id="panel-search" data-theme="b">
        <ul data-role="listview">
            <li>Tìm địa điểm</li>

            <li data-icon='false' data-role="fieldcontain">                    
                        <select placeholder="Chọn địa điểm" name="select-choice-1" id="select-choice-1b" data-native-menu="true">
                            <option value="javascript">Chọn địa điểm</option>
                            <option value="Restaurant">Nhà Hàng </option>
                            <option value="Coffee">Cafe</option>
                            <option value="SuperMarket">Siêu thị</option>
                            <option value="Fuel"> Trạm Xăng</option>
							<option value="Hospital"> Bệnh viện</option>
							
                        </select>
			</li>

            <li data-icon='false' data-role="fieldcontain">
                        <select name="select-choice-1" id="select-choice-1b" data-native-menu="true">
                            <option value="javascript">Phạm vi tìm kiếm</option>
                            <option value="300">300m</option>
                            <option value="1000">1000m</option>
                            <option value="5000">5000m</option>
                            <option value="all">Tấc cả</option>
                        </select>
			</li>

            <li>
						<button type="submit" data-inline='true'><i class='lIcon fa fa-search'></i>Tìm</button>
						<button type="reset" data-inline='true'><i class='lIcon fa fa-times'></i>Bỏ qua</button>
            </li>
        </ul>
    </div>


    <!-- panel street -->
    <div data-role="panel" data-display="push" id="panel-street" data-theme="b">
        <ul data-role="listview">
            <li>Tìm chỉ đường vjhfhfhfhfhfhgf</li>
            <li>
            	<button data-inline='true'><i class='lIcon fa fa-car'></i></button>
            	<button data-inline='true'><i class='lIcon fa fa-male'></i></button>
            	<button data-inline='true'><i class='lIcon fa fa-search'></i></button>
            </li>

            <li data-icon='false' data-role="fieldcontain">                  
                <input type="text" name="name2" id="name2b" value="" data-clear-btn="true" placeholder="Điểm xuất phát">
			</li>

            <li data-icon='false' data-role="fieldcontain">                    
                <input type="text" name="name2" id="name2b" value="" data-clear-btn="true" placeholder="Điểm đến">
			</li>			

            <li>
						<button type="submit" data-inline='true'><i class='lIcon fa fa-search'></i>Tìm</button>
						<button type="reset" data-inline='true'><i class='lIcon fa fa-times'></i>Bỏ qua</button>
            </li>
        </ul>
    </div>


    <!-- panel share -->
    <div data-role="panel" data-display="push" id="panel-share" data-theme="b">
        <ul data-role="listview">
            <li>Chia sẻ fhdskjhhjfds</li>

            <!-- radio share -->
            <li data-icon='false' data-role="fieldcontain">                  
                <fieldset data-role="controlgroup">

                	<input type="radio" name="radio-share" id="radio-warning" value="warning" checked="checked">
                 	<label for="radio-warning">Cảnh báo</label>

                    <input type="radio" name="radio-share" id="radio-address" value="address">
                    <label for="radio-address">Địa điểm</label>

                </fieldset>
			</li>

            <!-- select share -->
            <li id="icons-warning" data-role="fieldcontain">
                <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
                
                    <input type="radio" name="radio-choice-a" id="radio-choice-ab" value="choice-a" checked="checked">
                    <label for="radio-choice-ab"><i class='lIcon fa fa-warning'></i></label>

                    <input type="radio" name="radio-choice-a" id="radio-choice-bb" value="choice-b">
                    <label for="radio-choice-bb"><i class='lIcon fa fa-flash'></i></label>

                    <input type="radio" name="radio-choice-a" id="radio-choice-cb" value="choice-c">
                    <label for="radio-choice-cb"><i class='lIcon fa fa-car'></i></label>
                </fieldset>
            </li>

            <li style='display: none' id="icons-address" data-role="fieldcontain">
                <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
                
                    <input type="radio" name="radio-choice-a" id="radio-choice-ab" value="choice-a" checked="checked">
                    <label for="radio-choice-ab"><i class='lIcon fa fa-medkit'></i></label>

                    <input type="radio" name="radio-choice-a" id="radio-choice-bb" value="choice-b">
                    <label for="radio-choice-bb"><i class='lIcon fa fa-bank'></i></label>

                    <input type="radio" name="radio-choice-a" id="radio-choice-cb" value="choice-c">
                    <label for="radio-choice-cb"><i class='lIcon fa fa-male'></i></label>
                </fieldset>
            </li>            


            <li data-icon='false' data-role="fieldcontain">                    
                <input type="text" name="name2" id="name2b" value="" data-clear-btn="true" placeholder="Tên địa điểm">
                <input type="text" name="name2" id="name2b" value="" data-clear-btn="true" placeholder="Mô tả">
                <input type="text" name="name2" id="name2b" value="" data-clear-btn="true" placeholder="Tag người">
			</li>

            <li data-icon='false' data-role="fieldcontain">                    
                <button type="submit" data-inline='true'><i class='lIcon fa fa-film'></i></button>
                <button type="submit" data-inline='true'><i class='lIcon fa fa-file-photo-o'></i></button>
            </li>

            <li>
					<button type="submit" data-inline='true'><i class='lIcon fa fa-share'></i>Chia sẻ</button>
            </li>
        </ul>
    </div>


    <!-- panel friends -->
    <div data-role="panel" data-display="push" id="panel-friends" data-theme="b">
        <ul data-role="listview">
            <li>Bạn bè</li>

            <!-- select friend -->
            <li data-role="fieldcontain">
                <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
                
                    <input type="radio" name="radio-friend" id="radio-friend-list" value="friend-list" checked="checked">
                    <label for="radio-friend-list"><i class='lIcon fa fa-user'></i></label>

                    <input type="radio" name="radio-friend" id="radio-group-list" value="group-list">
                    <label for="radio-group-list"><i class='lIcon fa fa-group'></i></label>

                    <input type="radio" name="radio-friend" id="radio-required-list" value="required-list">
                    <label for="radio-required-list"><i class='lIcon fa fa-plus'></i></label>
					
					
                </fieldset>
            </li>

        </ul>


        <ul id="friend-list" data-role="listview" data-inset="false" data-icon="false" data-divider-theme="b">
            <li data-role="list-divider">Danh sách bạn bè <span class="ui-li-count">2</span></li>
            <li>
                <img src="images/users/rooney.jpg">
                <h2><a href='#'>Rooney</a></h2>
            </li>

            <li data-role="list-divider"></li>

            <li>
                <img src="images/users/schole.jpg">
                <h2><a href='#'>Paul schole</a></h2>
            </li>
        </ul>

        <ul style='display: none' id="group-list" data-role="listview" data-inset="false" data-icon="false" data-divider-theme="b">
            <li data-role="list-divider">Danh sách nhóm <span class="ui-li-count">2</span></li>
            <li>
                <img src="images/groups/bk.jpg">
                <h2><a href='#'>Bách Khoa HCM</a></h2>
            </li>

            <li data-role="list-divider"></li>

            <li>
                <img src="images/groups/cse.jpg">
                <h2><a href='#'>Khoa CNTT</a></h2>
            </li>
        </ul>

        <ul style='display: none' id="required-list" data-role="listview" data-inset="false" data-icon="false" data-divider-theme="b">
            <li data-role="list-divider">Danh sách kết bạn <span class="ui-li-count">2</span></li>
            <li>
                <img src="images/users/ronaldo.jpg">
                <h2>
                    <a href='#'>Ronaldo</a> 
                    <button type="submit" data-inline='true'>
                        <i class='lIcon fa fa-plus'></i>
                    </button>
                </h2>
            </li>

            <li data-role="list-divider"></li>

            <li>
                <img src="images/users/Persie.jpg">
                <h2>
                    <a href='#'>Persie</a> 
                    <button type="submit" data-inline='true'>
                        <i class='lIcon fa fa-plus'></i>
                    </button>
                </h2>
            </li>
        </ul>   
        
    </div>


    <!-- panel profile -->
    <div data-role="panel" data-display="push" id="panel-profile" data-theme="b">
        <ul data-role="listview">
            <li>Cá nhân</li>

            <!-- select friend -->
            <li data-role="fieldcontain">
                <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
                
                    <input type="radio" name="radio-profile" id="radio-position" value="position-list" checked="checked">
                    <label for="radio-position">Vị trí</label>

                    <input type="radio" name="radio-profile" id="radio-journey" value="journey-list">
                    <label for="radio-journey">Hành trình</label>

                </fieldset>
            </li>

        </ul>


        <ul id="position-list" data-role="listview" data-inset="false" data-icon="false" data-divider-theme="b">
            <li data-role="list-divider"><span class="ui-li-count">2</span></li>
            <li>
                <h2>
                    <a class="a-left" href='#'>Vị trí 1</a>
                    <button type="submit" data-inline='true'>
                        <i class='lIcon fa fa-share'></i>
                    </button>
                </h2>
            </li>

            <li data-role="list-divider"></li>

            <li>
                <h2>
                    <a class="a-left" href='#'>Vị trí 1</a>
                    <button type="submit" data-inline='true'>
                        <i class='lIcon fa fa-share'></i>
                    </button>
                </h2>
            </li>
        </ul>

        <ul style='display: none' id="journey-list" data-role="listview" data-inset="false" data-icon="false" data-divider-theme="b">
            <li data-role="list-divider"><span class="ui-li-count">2</span></li>
            <li>
                <h2>
                    <a class="a-left" href='#'>Hành trình 1</a>
                    <button type="submit" data-inline='true'>
                        <i class='lIcon fa fa-share'></i>
                    </button>
                </h2>
            </li>

            <li data-role="list-divider"></li>

            <li>
                <h2>
                    <a class="a-left" href='#'>Hành trình 2</a>
                    <button type="submit" data-inline='true'>
                        <i class='lIcon fa fa-share'></i>
                    </button>
                </h2>
            </li>
        </ul>             
    </div>

    <!-- footer -->
    <div data-position="fixed" data-tap-toggle="false" data-role="footer" data-tap-toggle="false" data-theme='b'>
        <div data-role="navbar">
            <ul>
			    
                <li>
                	<a href="#panel-search">
                		<i class="blIcon fa fa-search"></i>
                		Tìm địa điểm
                	</a>
                </li>

                <li>
                	<a href="#panel-street" data-iconpos='right'>
                		<i class='blIcon fa fa-retweet'></i>
                		Tìm chỉ đường
                	</a>
                </li>

                <li>
                    <a href="#panel-share">
                        <i class='blIcon fa fa-share'></i>
                        Chia sẻ
                    </a>
                </li>

                <li>
                    <a href="#panel-friends">
                        <i class='blIcon fa fa-users'></i>
                        Bạn bè
                    </a>
                </li>

                <li>
                    <a href="#panel-profile">
                        <i class='blIcon fa fa-file-archive-o'></i>
                        Cá nhân
                    </a>
                </li>
				<!--
                 <li>
                    <a href="#panel-profile">
                        <i class='blIcon fa fa-user'></i>
                        Đăng nhập
                    </a>
                </li>
				-->
            </ul>
        </div>
    </div>


    <div data-role='popup' id='search' data-theme='b'>
        <div data-role='header' data-theme='b'>
            <h1>Delete from library?</h1>
        </div>
        <div data-role='content' data-theme='b'>
            <form>
                <textarea cols="40" rows="8" name="textarea2" id="textarea2b" placeholder="This is a textarea" class="ui-input-text ui-shadow-inset ui-body-inherit ui-corner-all ui-textinput-autogrow" style="height: 53px;"></textarea>
                <div class='showastabs center nobg'>
                    <a href='#' data-rel='back' data-icon='ok' data-iconpos='left' data-role='button' data-inline='true'>Okay</a>
                    <a href='#' data-rel='back' data-icon='delete' data-iconpos='left' data-role='button' data-inline='true'>Cancel</a>
                </div>
            </form>
        </div>
    </div>



    


    <script type="text/javascript">
        $(document).ready(function() {
            

            $('input[type=radio][name=radio-share]').change(function() {
                if (this.value == 'warning') {
                        $("#icons-warning").show();
                        $("#icons-address").hide();
                }
                else if (this.value == 'address') {
                         $("#icons-address").show();
                        $("#icons-warning").hide();
                }
            });


            $('input[type=radio][name=radio-friend]').change(function() {
                if (this.value == 'friend-list') {

                        $("#friend-list").show();
                        $("#group-list").hide();
                        $("#required-list").hide();
                }
                else if (this.value == 'group-list') {

                        $("#friend-list").hide();
                        $("#group-list").show();
                        $("#required-list").hide();
                }
                else if (this.value == 'required-list') {

                        $("#friend-list").hide();
                        $("#group-list").hide();
                        $("#required-list").show();
                }                
            });

            
            $('input[type=radio][name=radio-profile]').change(function() {
                if (this.value == 'position-list') {

                        $("#position-list").show();
                        $("#journey-list").hide();
                }
                else if (this.value == 'journey-list') {

                        $("#journey-list").show();
                        $("#position-list").hide();
                }
            });
			map.locate({setView: true, maxZoom: 15});
			map.on('locationfound', onLocationFound);
			
	
	

        });// end ready
		// Load Photo
		var photoLayer = L.photo.cluster().on('click', function (evt) {
		var photo = evt.layer.photo,
			template = '<img src="{url}" width="300" height="300" /></a><p>{caption}</p>';

		if (photo.video && (!!document.createElement('video').canPlayType('video/mp4; codecs=avc1.42E01E,mp4a.40.2'))) {
			template = '<video autoplay controls poster="{url}" width="300" height="300"><source src="{video}" type="video/mp4"/></video>';
		}; 

		evt.layer.bindPopup(L.Util.template(template, photo), {
			className: 'leaflet-popup-photo',
			minWidth: 300
		}).openPopup();
	});

	
	$.ajax({
	  url: 'Rest_Api/load_image.php',
	  type: 'GET',
	  dataType: 'json',
	  data : {
			"journey_id" : 1
		},
	  success: function(response) {
		
		var rows = response.rows;
		photoLayer.add(rows).addTo(map);
			map.fitBounds(photoLayer.getBounds());
},
error: function(e) {

}
});
</script>


   
    
</body>
</html>